<template>
  <div class="tab-con">
    <div class="newItems">
      <ul class="clearfix">
        <li
          v-for="(item,index) in planList"
          :class="{'active': hoverActive == index, 'active-click': active == index}"
          ref="tabList"
          @mouseleave="mouseover(index)"
          @mouseenter="mouse($event,item,index)"
          :key="index"
        >
          <span  @click.stop="goPathP(item, index)" class="value">{{item.name}}</span>
          <!-- <i class="icon el-icon-arrow-down"></i>/ -->
          <div
            class="hoverDiv"
            ref="hoverDiv"
            :style="{'width':item.width+'px','left':-item.left+'px'}"
          >
            <div class="cont">
              <div class="items" v-for="(hItem,hIndex) in item.children" :key="hIndex">
                <!-- <p @click="itemUrl(hItem)">{{hItem.value}}</p> -->
                <div
                  v-for="(hhItem,hhIndex) in hItem.children"
                  :key="hhIndex"
                >
                  <div
                    class="_item"
                    v-for="(hhhItem,hhhIndex) in hhItem.children"
                    style="font-style: normal;"
                    :key="hhhIndex"
                  >
                    <template v-if="!hhhItem.hidden">
                      <span @click.stop="goPath(hhItem.path,hhhItem.path,hhItem, index)">{{hhhItem.meta.title}}</span>
                    </template>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import path from "path";
export default {
  data() {
    return {
      routerList: [], //所有路由
      hoverActive: -1,
      active: -1,
      planList: [
        {
          key: "yzt",
          name: "一张图",
          path:'/gmap/map2D',
          children: [
            {
              index: 1,
              key: "yzt",
              value: "一张图"
            }
          ]
        },
        {
          key: "zhck",
          name: "综合窗口",
          path:'/integratedWindow/index',
          children: [
            {
              index: 1,
              key: "zhck",
              value: "综合窗口"
            }
          ]
        },
        {
          key: "zwbg",
          name: "政务办公",
          path:'/zwbg/index',
          children: [
            {
              index: 1,
              key: "zwbg",
              value: "政务办公"
            }
          ]
        },
        {
          key: "ywsp",
          name: "业务审批",
          path:'/businessApproval/index',
          children: [
            {
              index: 1,
              key: "ywsp",
              value: "业务审批"
            }
          ]
        },
        {
          key: "jdjg",
          name: "监督监管",
          path:'/sas/cockpit',
          children: [
            {
              index: 1,
              key: "jdjg",
              value: "监督监管"
            }
          ]
        }
      ]
    };
  },
  computed: {
    moduleKey() {
      return this.$store.state.app.moduleKey;
    }
  },
  watch: {
   $route: {
      handler: function(val) {
        const menu = ['htgl','formModelerIndex','formModeler','formVersionManager','businessTableInnerAdd','ywst','ywobj','designForm','customDialogList','urlIndex','genEdit','gen','printTemplatesx','crmPrintDetail','businessObjAdd', 'qxgl', 'lcgl', 'bdgl', 'dzzl', 'dzqz', 'bdgj', 'ywpz', 'ewdtpz', 'swdtpz'];
        const menu2 = ['personalCenter', 'zyly', 'backlog', 'myResource'];
        console.log(val.name, 'vallllll');
        if (menu.indexOf(val.name) > -1) {
          this.planList = [
            {
              key: "bdgl",
              name: "表单管理",
              path: "/formmanagement",
              children: [
                {
                  index: 1,
                  key: "bdgl",
                  value: "表单管理"
                }
              ]
            },
            {
              key: "lcgl",
              name: "流程管理",
              path: "/processmanagement/index",
              children: [
                {
                  index: 1,
                  key: "lcgl",
                  value: "流程管理"
                }
              ]
            },
            //      {
            //   key: "lcgl",
            //   name: "流程管理",
            //   path: "/task",
            //   children: [
            //     {
            //       index: 1,
            //       key: "lcgl",
            //       value: "流程管理"
            //     }
            //   ]
            // },
            {
              key: "qxgl",
              name: "权限管理",
              path: "/authoritymanagement/index",
              children: [
                {
                  index: 1,
                  key: "qxgl",
                  value: "权限管理"
                }
              ]
            },
            {
              key: "yypz",
              name: "应用配置",
              path: "/yypz/index",
              children: [
                {
                  index: 1,
                  key: "yypz",
                  value: "应用配置"
                }
              ]
            },
            {
              key: "dzqz",
              name: "电子签章",
              path: "/electronicSignature/index",
              children: [
                {
                  index: 1,
                  key: "dzqz",
                  value: "电子签章"
                }
              ]
            },
            {
              key: "dzzl",
              name: "电子资料",
              path: "/ectronicdata/index",
              children: [
                {
                  index: 1,
                  key: "dzzl",
                  value: "电子签章"
                }
              ]
            },
          ];
          this.initMenu();
          if (val.fullPath.indexOf('formmanagement') > -1) {
            this.active = 0;
          }
        } else if (menu2.indexOf(val.name) > -1) {
          this.planList = [
            {
              key: "personalCenter",
              name: "个人中心",
              path: "/personalCenter/index",
              children: [
                {
                  index: 1,
                  key: "personalCenter",
                  value: "个人中心"
                }
              ]
            },
          ];
          this.initMenu();
          this.active = 0;
        } else {
          this.planList = [
            {
              key: "yzt",
              name: "一张图",
              path:'/gmap/map2D',
              children: [
                {
                  index: 1,
                  key: "yzt",
                  value: "一张图"
                }
              ]
            },
            {
              key: "zhck",
              name: "综合窗口",
              path:'/integratedWindow/index',
              children: [
                {
                  index: 1,
                  key: "zhck",
                  value: "综合窗口"
                }
              ]
            },
            {
              key: "zwbg",
              name: "政务办公",
              path:'/zwbg',
              children: [
                {
                  index: 1,
                  key: "zwbg",
                  value: "政务办公"
                }
              ]
            },
            {
              key: "ywsp",
              name: "业务审批",
              path:'/businessApproval/index',
              children: [
                {
                  index: 1,
                  key: "ywsp",
                  value: "业务审批"
                }
              ]
            },
            {
              key: "jdjg",
              name: "监督监管",
              path:'/sas/cockpit',
              children: [
                {
                  index: 1,
                  key: "jdjg",
                  value: "监督监管"
                }
              ]
            }
          ];
          this.initMenu();
          if (val.fullPath.indexOf('gmap') > -1) {
            this.active = 0;
          }
        }
      },
      deep: true
    }
  },
  mounted() {
    this.initMenu();
    let index = window.localStorage.getItem("menuIndex");
    this.active = index;
  },
  methods: {
    //二级
    itemUrl(item){
      let a = item.children[0].path;
      let b = item.children[0].children[0].path;
      let goPath = path.resolve(a, b);
      this.$router.push({ path: goPath });
      this.setKey(item.key);
    },
    //主菜单
    goPathP(item, index){
      console.log(item,index)
      this.setKey(item.key);
      this.active = index;
      window.localStorage.setItem("menuIndex", index);
      this.$router.push({ path: item.path });
    },
    //跳转
    goPath(a, b, item, index) {
      console.log(item,index)
      this.active = index;
      window.localStorage.setItem("menuIndex", index);
      let goPath = path.resolve(a, b);
      this.setKey(item.meta.key);
      this.$router.push({ path: goPath });
    },
    //初始化路由分配
    initMenu() {
      let routerList = this.$store.getters.permission_routers;
      for (let i in this.planList) {
        this.planList[i].children.forEach(ele => {
          ele.children = [];
          for (let j in routerList) {
           
            if (routerList[j].meta && routerList[j].meta.key)
              if (ele.key == routerList[j].meta.key) {
                
                ele.children.push(routerList[j]);
              }
            }
            console.log(this.planList[i].children[0].children[0].children, 'this.planList[i].children');
            let arr = this.planList[i].children[0].children[0].children;
            let longest = 0;
            longest = arr.reduce(function(longest, currentWord) { // 找出title最长度并计算宽度
                return Math.max(longest, currentWord.meta.title.length)
            }, 0)
            this.planList[i].width = 16 * longest + 40;
            
            this.planList[i].left = (this.planList[i].width-64)/2;
          });
          
      }
      // 第一个菜单弹窗定位
      this.planList[0].left = (this.planList[0].width-48)/2;
    },
    //移入
    mouse(e, item, index) {
      this.hoverActive = index;
    },
    //移出
    mouseover() {
      if (this.hoverActive === -1) {
        return
      }
      this.hoverActive = -1;
    },
    setKey(key) {
      this.$store.dispatch("moduleKey", key);
    },
  }
};
</script>

<style lang="scss" scoped>
.nav-list {
  flex: 1;
  height: 64px;
  ul {
    text-align: right;
    height: 64px;
    li {
      display: inline-block;
      color: #d7d8db;
      cursor: pointer;
      height: 64px;
      span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        padding: 0 20px;
        font-size: 14px;
        height: 64px;
      }
    }
    .active {
      background: #014274;
      color: #d7d8db;
      position: relative;
      &::before {
        content: "";
        width: 40px;
        height: 2.7px;
        background: #fff;
        position: absolute;
        bottom: 14px;
        left: 50%;
        margin-left: -20px;
      }
    }
  }
}
.tab-con {
  position: relative;
  height: 64px;
  flex: 1;
  display: flex;
  margin-left: 20px;
  .clibtn {
    position: absolute;
    top: 50%;
    margin-top: -9px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
  }
  .right {
    right: 16px;
    // background: rgba(82, 158, 239, 1) url("../../assets/left.png") no-repeat
      // center;
    background-size: 10px;
    transform: rotate(180deg);
  }
  .left {
    left: 16px;
    // background: rgba(82, 158, 239, 1) url("../../assets/left.png") no-repeat
      // center;
    background-size: 10px;
  }
  .isNone {
    display: none;
  }

  .tab-ul {
    position: relative;
    width: auto;
    // width: 850px;
    height: 100%;
    // margin: 0 42px;
    overflow: hidden;
    ul {
      float: right;
      // height: 100%;
      // position: absolute;
      // transition: 0.5s;
      li {
        float: left;
        color: #d9e6f3;
        opacity: 0.8;
        text-align: center;
        height: 64px;
        cursor: pointer;
        span {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          display: inline-block;
          // padding: 0 2%;
          padding: 0 20px;
          font-size: 14px;
        }
        // &:hover {
          // background: #114b99;
          // background-color: #e4edfb;
          // height: 50px;
          // color: #3385ff;
        // }
      }
      .active {
        background: #4c5168;
        color: #ffffff;
        // background: #114b99;
        // span {
        //   // height: 47px;
        //   // border-bottom: 3px solid #3385ff;
        //   background-color: #e4edfb;
        //   height: 50px;
        //   color: #3385ff;
        // }
      }
    }
  }
}
/deep/ .selW .el-select input {
  height: 28px;
  border: none;
  outline: none;
  background: transparent;
  color: #d7d8db;
}
/deep/.el-input {
  font-size: 14px;
}
/deep/.selW .el-icon-arrow-up:before {
  color: #d7d8db;
}
/deep/.selW .el-input__icon {
  line-height: 28px;
}
/deep/.selW .el-input__inner {
  border-radius: 3px;
}
.selW ::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #fff;
}
.selW ::-moz-placeholder {
  /* Firefox 19+ */
  color: #fff;
}
.selW :-ms-input-placeholder {
  /* IE 10+ */
  color: #fff;
}
.selW :-moz-placeholder {
  /* Firefox 18- */
  color: #fff;
}
/deep/.el-menu--horizontal > .el-submenu .el-submenu__title {
  height: 64px;
  line-height: 64px;
  border: none;
  font-size: 14px;
}
/deep/.el-menu-right .el-submenu__title {
  border-bottom: 3px solid #3385ff !important;
}
/deep/.el-menu--horizontal > .el-submenu .el-submenu__icon-arrow {
  display: block !important;
}
/deep/.el-menu--horizontal > .el-submenu .el-submenu__icon-arrow {
  position: absolute;
  top: 50%;
  right: 0px;
  margin-top: -5px;
  margin-right: 5px;
  position: absolute !important;
}
/deep/.el-menu--horizontal > .is-active .el-submenu__title {
  background: #4c5168 !important;
  color: #ffffff !important;
}
//新导航
.newItems {
  margin-top: 4px;
  float: left;
  ul {
    li {
      display: flex;
      position: relative;
      text-align: center;
      height: 100%;
      color: #fff;
      float: left;
      cursor: pointer;
      .value {
        flex: 1;
        font-size: 16px;
        margin-right: 35px;
      }
      .icon {
        line-height: 64px;
        margin-right: 35px;
        margin-left: 5px;
        font-size: 10px;
      }

      .hoverDiv {
        position: absolute;
        // left: 30px;
        top: 60px;
        z-index: 99999;
        height: initial;
        background: #fff;
        display: none;
        box-sizing: border-box;
       
        &::before {
          display: block;
          content: "";
          border-width: 8px 8px 8px 8px;
          border-style: solid;
          border-color: transparent transparent #fff transparent;

          /* 定位 */
          position: absolute;
          left: 50%;
          margin-left: -8px;
          top: -16px;
        }

        .cont {
          position: relative;
          width: 100%;
          overflow: hidden;
          background: rgba(255, 255, 255, 1);
          padding: 15px 20px;
          box-sizing: border-box;
          box-shadow: 0rem 0.0833rem 0.3333rem 0rem rgba(0, 0, 0, 0.3);
        }
        .items {
          width: 100%;
          line-height: 30px;
          text-align: left;
          margin-right: 50px;
          p {
            width: 100%;
            height: 30px;
            line-height: 30px;
            padding-bottom: 7px;
            color: #6f6f6f;
            text-align: center;
            border-bottom: 1px solid #999;
            margin-bottom: 10px;
            font-size: 16px;
            &:hover {
              color: #0085ff !important;
            }
          }
          ._item {
            color: #333;
            font-size: 16px;
            text-align: left;
            &:hover{
              color: #0085ff;
            }
          }
          .span {
            display: inline-block;
            width: 100%;
            box-sizing: border-box;
            height: 32px;
            // padding: 0 20px;
            line-height: 32px;
            text-align: left;
            cursor: pointer;
            font-size: 16px;
            padding-top: 5px;
          }
          .span:hover{
            color: #0085ff;
          }
         
        }
        .items:last-child{
          margin-right: 0px
        }
      }
    }
    .active-click{
      color: #0085ff;
    }
    .active{
      color: #0085ff;
        .hoverDiv{
          display: block !important;
        }
        .el-icon-arrow-down{
         transform: rotate(180deg);
         transition:0.2s;
        }
      }
  }
}
.clearfix:after {
  content: "020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {
  /* 触发 hasLayout */
  zoom: 1;
}
</style>